﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的留言 - 模切材料小管家</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root{--primary:#0052d9;--border:#e7e7e7;--bg:#fff;--muted:#86909c}
        *{box-sizing:border-box;margin:0;padding:0;font-family:"PingFang SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
        body{background:#f5f7fa;color:#1a1a1a}
        .container{max-width:480px;margin:0 auto;background:#fff;min-height:100vh;box-shadow:0 1px 2px rgba(0,0,0,.05)}
        .navbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:#fff}
        .nav-title{flex:1;text-align:center;font-size:16px;font-weight:600}
        .content{padding:16px}
        .card{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff}
        .list{list-style:none}
        .item{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border)}
        .item:last-child{border-bottom:none}
        .avatar{width:32px;height:32px;border-radius:50%;background:#0052d9;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
        .meta{font-size:12px;color:var(--muted);margin-bottom:4px;display:flex;gap:8px}
        .text{font-size:14px;line-height:1.6}
        .empty{padding:24px;text-align:center;color:var(--muted)}
    </style>
</head>
<body>
<div class="container">
    <div class="navbar">
        <button style="background:none;border:none" onclick="history.back()"><i class="fas fa-arrow-left"></i></button>
        <div class="nav-title">我的留言</div>
        <div style="width:24px"></div>
    </div>

    <div class="content">
        <div class="card">
            <ul id="msgList" class="list"></ul>
            <div id="empty" class="empty" style="display:none">暂无留言</div>
        </div>
    </div>
</div>

<script>
function loadMessages(){
    const listEl=document.getElementById('msgList');
    const emptyEl=document.getElementById('empty');
    const messages=JSON.parse(localStorage.getItem('messages')||'[]');
    listEl.innerHTML='';
    if(messages.length===0){ emptyEl.style.display='block'; return; }
    emptyEl.style.display='none';
    messages.slice().reverse().forEach(m=>{
        const li=document.createElement('li');
        li.className='item';
        li.innerHTML=`<div class="avatar">${(m.name||'友').slice(0,1)}</div>
            <div style="flex:1">
                <div class="meta"><span>${m.name||'匿名'}</span><span>${m.phone||''}</span><span>${m.time||''}</span></div>
                <div class="text">${m.content||''}</div>
            </div>`;
        listEl.appendChild(li);
    });
}

document.addEventListener('DOMContentLoaded',loadMessages);
</script>
</body>
</html>


